/* 
vue 小程序 react 交互的案例 
1 出发点   数据驱动视图  （ 只要你发现页面的中的会变化的标签  => 拿什么数据存储！！ ）
2 在输入框的 值发生改变的时候   获取它 设置到 inpValue
  1 vue: v-model
  2 现在是小程序 醒醒 也有 类似 v-model  写法 model:value="{{inpValue}}"
    1 手动来实现 
    2 输入框 绑定 input事件
    3 事件触发了 通过事件对象 e 获取到输入框值 
    4 设置到 data中变量  inpValue  
 */
Page({
  data: {
    // 输入框的值
    inpValue: "123",
    // 数组 
    // 普通 字符串数组  || 对象数组   看业务来决定  
    list: [
      "西瓜1",
      "麻瓜2"
    ]

  },

  // 输入框事件
  // handleInput(e) {
  //   // console.log(e.detail.value);

  //   // 设置到data中
  //   this.setData({
  //     inpValue: e.detail.value
  //   })
  // }

  // 按钮点击事件
  handleTap() {
    // 获取输入框的值 获取数组
    const { inpValue, list } = this.data;

    // 判断当前元素是否已经存在于数组中  
    // [].includes
    if (!list.includes(inpValue)) {
      // 不存在
      // 数组 添加新的值
      list.push(inpValue);
      // 把数据都设置回data中
      this.setData({
        inpValue: "",
        list
      })
    } else {

      // 弹出窗口 提示  小程序api
      wx.showToast({
        title: '已经存在相同数据',
        icon: 'none'
      });

    }



  },

  // 点击元素执行删除
  handleDelete(e) {
    // console.log(e.target.dataset.index);
    const { list } = this.data;
    list.splice(e.target.dataset.index, 1);
    this.setData({
      list
    })
  }
})